<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    template="layout/mytemplate.xhtml"
                xmlns:a4j="http://richfaces.org/a4j">

<ui:define name="body">
		
<center>
	<div class="container">
	<div align="left" style="margin-left:150px;">
	<font size="3">
	<h:outputLink value="/FacebookDirectory.html"  >
	<h:outputText value="#{messages.EnglishLanguage}" />
	</h:outputLink>	
	</font>
	</div>
	<center>		
	
		<div class="sidebar">		
	<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_favorites"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e79f5be5f053a34"></script>
<!-- AddThis Button END -->
	</div>	
	<rich:panel style="width:600px; border:none" >
		<h:panelGrid columns="2">
		<rich:panel style=" border:none">
			<img src="img\Facebook-logo3.png" alt="Logo" width="80" height="80"
				align="middle" />
				</rich:panel>
		<rich:panel style=" border:none">	
			<font size="3">如果你喜欢的游戏没有出现在列表中，你可以发送邮件到<a href="mailto:fbapplist@gmail.com?Subject=ReplaceWithGameName">fbapplist@gmail.com</a>，邮件的标题是游戏的名称，游戏将会在5分钟内被加入到列表。</font>
		</rich:panel>
		</h:panelGrid>
		</rich:panel>		
		</center>	
			
		<div class="content" >						
		<rich:tabPanel id="tp" headerPosition="top" headerLocation="center">
		<rich:tab id="mostActivity" label="最多人玩">		
            <s:div style="position:relative; float:right" rendered ="#{(mostActivityList.pageCount>1)}">
				<table cellpadding="2" cellspacing="2" align="right"  >
					<tr> 				
						<td><h:outputLink value="FacebookDirectory_zh.html"
								rendered="#{mostActivityList.previousPageExists}"								
								id="firstPage">
								<h:outputText value="#{messages.left}#{messages.left} First" />
								<f:param name="firstResult" value="0" />
							</h:outputLink>							
						</td>
						<td>
						<h:outputLink value="FacebookDirectory_zh.html"
								rendered="#{mostActivityList.previousPageExists}"								
								id="previousPage">
								<h:outputText value="#{messages.left} Previous" />
								<f:param name="firstResult"
									value="#{(mostActivityList.previousPage-1)*mostActivityList.maxResults}" />
						</h:outputLink>								
						</td>
						<ui:repeat var="page" value="#{mostActivityList.pageList}">
							<td><h:outputLink view="/FacebookDirectory_zh.xhtml"
									rendered="#{mostActivityList.page!=page}" >
									<h:outputText value="#{page}" />
									<f:param name="firstResult"
										value="#{(page-1)*mostActivityList.maxResults}" />
								</h:outputLink>
								<h:outputText value="#{page}" rendered="#{mostActivityList.page==page}"/>
							</td>
						</ui:repeat>
						<td><h:outputLink view="/FacebookDirectory_zh.xhtml"
								rendered="#{mostActivityList.nextPageExists}"
								id="nextPage">
								<h:outputText value="Next #{messages.right}" />
								<f:param name="firstResult"
									value="#{(mostActivityList.nextPage-1)*mostActivityList.maxResults}" />
							</h:outputLink>
						</td>
						<td><h:outputLink view="/FacebookDirectory_zh.xhtml"
								rendered="#{mostActivityList.nextPageExists}"								
								id="lastPage">
								<h:outputText value="Last #{messages.right}#{messages.right}" />
								<f:param name="firstResult"
									value="#{(mostActivityList.pageCount-1)*mostActivityList.maxResults}" />
							</h:outputLink>
						</td>
					</tr>
				</table>
			</s:div>	
           
				
		<div>	
			<font size="4" style="position:relative; float:left"> 			
				<h:outputLabel  value="共找到 #{mostActivityList.resultCount}个游戏" />
			</font>				
			
			</div>
			<div class="results" id="mostActivityList">
				<h:outputText value="The appInfo search returned no results."
					rendered="#{empty mostActivityList.resultList}" />
				<rich:dataTable id="mostActivityTable" var="_appInfo" style="border-left:none"
				 	onRowMouseOver="this.style.backgroundColor='#FFEBDA'"
                    onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
					value="#{mostActivityList.resultList}"
					rendered="#{not empty mostActivityList.resultList}">
						<rich:column width="120" style="border-right: none;" id="left-content">						
								<h:graphicImage id="image" alt="jsf-sun"
									url="#{_appInfo.profilePhoto}" width="110" height="80">
								</h:graphicImage>													
						</rich:column>
						<rich:column width="500" style="border-right: none;" id="center-content">	
						<div align="left">					
						<font size="3" color="blue"> 
						<h:outputLabel value="#{_appInfo.profileName}" style="padding-left:6px"/>
						</font>
						<h:panelGrid columns="1">																		
						<h:outputLabel value="#{_appInfo.description}" escape="false" />
						</h:panelGrid>																																
						
						<div class="classification"><div class="cover"></div><div class="progress" style="width:#{_appInfo.averageRating*100}%"></div></div>																																	
						<i>						
						<h:outputText value="#{_appInfo.reviews}" style="padding-left:6px; margin-right:20px"></h:outputText>
						</i>
						<font size="3">
						<b> 
						<h:outputText value="#{_appInfo.monthActive}">
							<f:convertNumber />
						</h:outputText>
						</b> 
						</font>												
						<i>monthly active users</i>		
						</div>					
					</rich:column>
					<rich:column width="80" style="border-right: none;" id="right-content">
					<button onclick="window.open('#{_appInfo.mainURL}');"  type="button">开始游戏</button>																
					</rich:column>				
					</rich:dataTable>
					
				</div> <!-- end results -->	
        </rich:tab> <!-- end tab Most Activity -->
        
         <rich:tab id="todaySpecial" label="今日精选">
         	<div>	
			<font size="4" style="position:relative; float:left"> 			
				<h:outputLabel  value="今日精选20个游戏" />
			</font>				
			
			</div>
            <div class="results" id="todaySpecialList">
				<h:outputText value="The appInfo search returned no results."
					rendered="#{empty todaySpecialList.resultList}" />
				<rich:dataTable id="todaySpecialTable" var="_appInfo" style="border-left:none"
				 	onRowMouseOver="this.style.backgroundColor='#FFEBDA'"
                    onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
					value="#{todaySpecialList.resultList}"
					rendered="#{not empty todaySpecialList.resultList}">
						<rich:column width="120" style="border-right: none;" id="left-content">						
								<h:graphicImage id="image" alt="jsf-sun"
									url="#{_appInfo.profilePhoto}" width="110" height="80">
								</h:graphicImage>													
						</rich:column>
						<rich:column width="500" style="border-right: none;" id="center-content">	
						<div align="left">					
						<font size="3" color="blue"> 
						<h:outputLabel value="#{_appInfo.profileName}" style="padding-left:6px"/>
						</font>
						
															
						<h:panelGrid columns="1">																		
						<h:outputLabel value="#{_appInfo.description}" escape="false" />
						</h:panelGrid>																				
						
						
						
						<div class="classification"><div class="cover"></div><div class="progress" style="width:#{_appInfo.averageRating*100}%"></div></div>																																	
						<i>						
						<h:outputText value="#{_appInfo.reviews}" style="padding-left:6px; margin-right:20px"></h:outputText>
						</i>
						<font size="3">
						<b> 
						<h:outputText value="#{_appInfo.monthActive}">
							<f:convertNumber />
						</h:outputText>
						</b> 
						</font>												
						<i>monthly active users</i>		
						</div>					
					</rich:column>
					<rich:column width="80" style="border-right: none;" id="right-content">
					<button onclick="window.open('#{_appInfo.mainURL}');"  type="button">开始游戏</button>					
										
					</rich:column>
					</rich:dataTable>						
				</div> <!-- end results -->	
        </rich:tab><!-- Today Special -->
            <rich:tab id="latestUpdate" label="最近更新">
            <div>	
			<font size="4" style="position:relative; float:left"> 			
				<h:outputLabel  value="最近更新的游戏" />
			</font>				
			
			</div>           
 			<div class="results" id="latestUpdateList">
				<h:outputText value="The appInfo search returned no results."
					rendered="#{empty latestUpdateList.resultList}" />
				<rich:dataTable id="latestUpdateList" var="_appInfo" style="border-left:none"
				 	onRowMouseOver="this.style.backgroundColor='#FFEBDA'"
                    onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
					value="#{latestUpdateList.resultList}"
					rendered="#{not empty latestUpdateList.resultList}">
						<rich:column width="120" style="border-right: none;" id="left-content">						
								<h:graphicImage id="image" alt="jsf-sun"
									url="#{_appInfo.profilePhoto}" width="110" height="80">
								</h:graphicImage>													
						</rich:column>
						<rich:column width="500" style="border-right: none;" id="center-content">	
						<div align="left">					
						<font size="3" color="blue"> 
						<h:outputLabel value="#{_appInfo.profileName}" style="padding-left:6px"/>
						</font>
						
															
						<h:panelGrid columns="1">																		
						<h:outputLabel value="#{_appInfo.description}" escape="false" />
						</h:panelGrid>																				
						
						
						
						<div class="classification"><div class="cover"></div><div class="progress" style="width:#{_appInfo.averageRating*100}%"></div></div>																																	
						<i>						
						<h:outputText value="#{_appInfo.reviews}" style="padding-left:6px; margin-right:20px"></h:outputText>
						</i>
						<font size="3">
						<b> 
						<h:outputText value="#{_appInfo.monthActive}">
							<f:convertNumber />
						</h:outputText>
						</b> 
						</font>												
						<i>monthly active users</i>		
						</div>					
					</rich:column>
					<rich:column width="80" style="border-right: none;" id="right-content">
					<button onclick="window.open('#{_appInfo.mainURL}');"  type="button">开始游戏</button>					
										
					</rich:column>
					</rich:dataTable>						
				</div> <!-- end results -->							
        </rich:tab> <!-- end tab Latest Update -->
           
		</rich:tabPanel>	
		
			
		</div> <!-- end content -->
		</div><!-- end container -->
		</center>
	</ui:define>

</ui:composition>
<!-- 
					<rich:datascroller align="left" maxPages="20">
					<f:facet name="first">
						<h:outputText value="First" />
					</f:facet>
					<f:facet name="last">
						<h:outputText value="Last" />
					</f:facet>
				</rich:datascroller>
 -->